<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>jQ获取关系节点</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li>li_3 <span>h</span><span>o</span><p>llo</p></li>
        <li>li_4</li>
        <li>li_5</li>
        <li>li_6</li>
    </ul>

    <div class="box"></div>
    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        // jQ获取元素是通过函数调用获取的，因此当有一个jQ对象操作比较频繁时，推荐获取该对象然后操作 
        console.log($("ul") === $("ul")); // false

        console.log($("ul")[0] === $("ul")[0]); // true

        // 推荐使用 $变量名 对应的 jQ 对象
        var $li2 = $("li:eq(2)");

        console.log("eq属性获取", $("li").eq(2)); // li_3

        // 特点 jQ 对象的属性对应的值几乎都是方法
        console.log("选择父元素", $li2.parent());
        console.log("选择所有子元素", $li2.children());
        console.log("选择下一个兄弟元素", $li2.next());
        console.log("选择上一个兄弟元素", $li2.prev());
        console.log("选择除自己以外所有的兄弟元素", $li2.siblings());

        console.log("前面所有的", $li2.prevAll());
        console.log("后面所有的", $li2.nextAll());

        console.log("find查找", $li2.find("p"));

        // 前面所有的方法都可以加选择器

    </script>
</body>
</html>